<template>
    <div ref="mapContainer" id="map-container">
      <div ref="map" id="map"></div>
      <canvas ref="canvas" style="display: none;"></canvas>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import L from 'leaflet'
  import 'leaflet/dist/leaflet.css'
  import * as turf from '@turf/turf'
  import kriging from '@sakitam-gis/kriging'
  import { getVectorContour, drawCanvasContour } from 'kriging-contour'
  import hebei from './data/hebei.json' // 请确保路径正确
  import points from './data/point.json' // 请确保路径正确
  
  const mapContainer = ref(null)
  const map = ref(null)
  const canvas = ref(null)
  
  onMounted(() => {
  initMap();
});
  const initMap = () => {
    // 初始化地图
    const mapInstance = L.map(map.value, {
      center: [38.0476, 114.5149],
      zoom: 7,
    })
    L.tileLayer("http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7").addTo(mapInstance)
}
  // 计算边界范围
  let dd1 = turf.bbox(boundaries);
      let points1 = {
          type: "FeatureCollection",
          features: []
        }
      pointvalue.map(item => {
          points1.features.push({
              geometry: {
                coordinates: [item.lng, item.lat],
                  type: 'Point'
                    },
                  properties: {
                    value: item.value
                },
                  type: 'Feature'
              })
          })
  
          let levelV = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 250, 260, 270, 280, 290, 300, 400];
          let colors = [{fill: "#ffdc84"}, {fill: "#ffd782"}, { fill: "#ffd281"}, {fill: "#ffcd7f"}, {fill: "#ffc87e"}, {fill: "#ffc37c"}, {fill: "#ffbe7a"}, {
                  fill: "#ffb979"}, {fill: "#feb477"}, {fill: "#feaf76"}, {fill: "#feaa74"}, { fill: "#fea573" }, {fill: "#fea071"}, {fill: "#fe9b6f"}, {
                  fill: "#fe966e"}, {fill: "#fe906c"}, {fill: "#fe8b6b"}, {fill: "#fe8669"}, { fill: "#fe8167"}, {fill: "#fe7c66"}, {fill: "#fe7764"}, {
                  fill: "#fe7263"}, {fill: "#fd6d61"}, {fill: "#fd6860"}, { fill: "#fd635e" }, {fill: "#fd5e5c"}, {fill: "#fd595b"}, {fill: "#fd5459"}, {
                  fill: "#fd4f58"}, {fill: "#fd4a56"}]         
     // 创建图像叠加层
  
     let kriging_contours = kriging.getVectorContour(points1, 'value', {
            model: 'exponential',
            sigma2: 0,
            alpha: 100
        }, levelV, dd1);
 
 
        function hotColor(d) {
 
            let index = levelV.findIndex((item) => item >= d);
            if (index > -1) {
                return colors[index].fill
            } else {
                return colors[colors.length - 1].fill
            }
        }
 
        function sortArea(a, b) {
            return turf.area(b) - turf.area(a);
        }
        //按照面积对图层进行排序，规避turf的一个bug
        kriging_contours.features.sort(sortArea)
 
        //后面使用要求输入的参数为Feature<Polygon> ，而turf.isobands的是 MultiPolygon，需要先 flatten() 处理一下,同时去掉图形为空的记录
        boundaries = turf.flatten(boundaries); //行政边界
 
        kriging_contours = turf.flatten(kriging_contours); //等值面边界
        //console.log('kriging_contours:'+JSON.stringify(kriging_contours));
        //根据行政边界裁剪图形,
        //现在放大一些区域边界还是没有充满  后面可以封装成一个插件，在源码里面进行canvas  clip 剪辑只显示的geojson区域，其余的栅格部分不显示
        let features = []; //裁剪后的结果集
        kriging_contours.features.forEach(function(feature1) {
            boundaries.features.forEach(function(feature2) {
                let intersection = null;
                try {
 
                    intersection = turf.intersect(feature1, feature2);
 
                } catch (e) {
 
                    try {
                        //色斑图绘制之后，可能会生成一些非法 Polygon
                        //解决的方法通常就是做一次 turf.buffer() 操作，这样可以把一些小的碎片 Polygon 清理掉。
                        feature1 = turf.buffer(feature1, 0);
                        intersection = turf.intersect(feature1, feature2);
                    } catch (e) {
 
                        intersection = feature1; //实在裁剪不了就不裁剪了,根据业务需求自行决定
 
                    }
 
                }
                if (intersection != null) {
                    intersection.properties = feature1.properties;
                    intersection.id = (Math.random() * 100000).toFixed(0);
                    features.push(intersection);
                }
            });
        });
 
        let intersection = turf.featureCollection(features);
 
        L.geoJSON(intersection, {
            style: function(feature) {
                return {
 
                    fillColor: hotColor(feature.properties.value),
                    weight: 0,
                    fillOpacity: 0.3,
 
                };
            }
        }).addTo(map);

  </script>
  
  <style>
  #map-container {
    width: 100%;
    height: 100vh;
  }
  
  #map {
    width: 100%;
    height: 100%;
  }
  
  .leaflet-container {
    background: #fff;
  }
  </style>